<template>
  <div class="home">
    <el-container style="height: 100vh; width: 100%;">
      <!-- 侧边栏  -->
      <Aside :asideWidth="asideWidth" :isCollapse="isCollapse" :user="user"/>

      <el-container>
        <!-- 顶栏  -->
        <el-header style="border-bottom: 1px solid #ccc;">
          <Header :collapseButtonClass="collapseButtonClass" :collapse="collapse" :user="user"/>
        </el-header>

        <el-main>
          <vue-particles
                  color="#AEE096"
                  :particleOpacity="0.7"
                  :particlesNumber="140"
                  shapeType="circle"
                  :particleSize="4"
                  linesColor="#ACACAC"
                  :linesWidth="1"
                  :lineLinked="true"
                  :lineOpacity="0.4"
                  :linesDistance="150"
                  :moveSpeed="3"
                  :hoverEffect="true"
                  hoverMode="grab"
                  :clickEffect="true"
                  clickMode="push"
          >   </vue-particles>
          <router-view @avatarChange="getAvatar" />
        </el-main>
      </el-container>
    </el-container>
    <MouseMove />
  </div>
</template>

<script>
// @ is an alias to /src
import Aside from "@/components/Aside"
import Header from "@/components/Header"
import MouseMove from "@/components/MouseMove"

export default {
  name: 'HomeView',
  components: {
    Aside,
    Header,
    MouseMove
  },
  data () {
    return {
      // 用户信息
      user: localStorage.getItem('user') ? JSON.parse(localStorage.getItem('user')) : {},
      // 侧边栏收缩控制
      isCollapse: false,
      asideWidth: 200,
      collapseButtonClass: 'el-icon-s-fold',
    }
  },
  methods: {
    // 边栏收缩
    collapse () {
      this.isCollapse = !this.isCollapse
      if (this.isCollapse) {
        this.collapseButtonClass = 'el-icon-s-unfold'
        this.asideWidth = 64
      } else {
        this.collapseButtonClass = 'el-icon-s-fold'
        this.asideWidth = 200
      }
    },
    getAvatar () {
      this.request.get('/user/' + this.user.id).then(res => {
        if (res.code === '200') {
          this.user = res.data
        } else {
          this.$message.error(res.message)
        }
      })
    }
  }
}
</script>
<style scoped>
  #particles-js {
    /*width: 100%;*/
    height: calc(100% - 100px);
    position: absolute;
    z-index: -1;
  }
</style>

